<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery.js"></script>
</head>
<style>
    table {
        width: 800px;
        border-collapse: collapse;
    }

    tr,
    th,
    td {
        border: 1px solid black;
        text-align: center;
    }
</style>

<body>
    <!-- 姓名<input type="text"><br>
    年龄<input type="number"><br>
    电话<input type="text"><br>
    邮箱<input type="emait"><br>
    性别<label for="nan"><input type="radio" name="sex" id="nan">男</label>
    <label for="nv"><input type="radio" name="sex" id="nv">女</label>
    <label for="unknown"><input type="radio" name="sex" id="unknown">未知</label><br>
    民族<input type="text"><br>
    <button id="sumbits">提交</button> -->

    姓名：<input type="text" id="name"><br>
    年龄：<input type="text" id="age"><br>
    电话：<input type="text" id="phone"><br>
    邮箱：<input type="text" id="mailbox"><br>
    性别：<label for="nan"><input type="radio" name="sex" value="男" checked id="nan">男</label>
    <label for="nv"><input type="radio" name="sex" value="女" id="nv">女</label>
    <label abel for="unknown"><input type="radio" name="sex" value="未知" id="unknown">未知</label><br>
    民族：<input type="text" id="nation"><br>
    <button id="tijiao">提交</button>

    <hr>

    姓名<input type="text" id="keywords">
    <button id="search">搜索姓名</button>
    <button id="ageObj">年龄</button>
    <hr>
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>电话</th>
                <th>邮箱</th>
                <th>性别</th>
                <th>民族</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</body>
<script>
    var dataList = [],
        status = 'add',     //告诉提交按钮是 编辑还是新增
        thisId = -1
    $(function () {
        showList()
        // 搜索
        $('#search').click(function () {
            var keywords = $('#keywords').val()
            if (keywords.length) {
                var arr = dataList.filter(function (item) {
                    if (item.name.indexOf(keywords) != -1) {
                        return true
                    }
                })
                showList(arr)
            } else {
                showList()
            }
        })
        $('#add').click(function () {
            status = 'add'
        })
        //提交或编辑事件
        $('#tijiao').click(function () {
            var name = $('#name').val()
            var age = $('#age').val()
            var phone = $('#phone').val()
            var mailbox = $('#mailbox').val()
            var sex = $('input[name=sex]:checked').val()
            var nation = $('#nation').val()
            if (status == 'add') {
                dataList.push({
                    name: name,
                    age: age,
                    phone: phone,
                    mailbox: mailbox,
                    sex: sex,
                    nation: nation
                })
                localStorage.setItem('dataList', JSON.stringify(dataList))
                // 找到表格
                showList()
            } else {
                // 编辑的逻辑
                dataList[thisId] = {
                    name: name,
                    age: age,
                    phone: phone,
                    mailbox: mailbox,
                    sex: sex,
                    nation: nation
                }
                localStorage.setItem('dataList', JSON.stringify(dataList))
                showList()
            }
        })
        function showList(arr = []) {
            if (arr.length > 0) {
                dataList = arr
            } else {
                dataList = localStorage.getItem('dataList') ? JSON.parse(localStorage.getItem('dataList')) : []
            }
            var strHtml = ''
            for (let i in dataList) {
                strHtml += `<tr>
                            <td>${dataList[i].name}</td>
                            <td>${dataList[i].age}</td>
                            <td>${dataList[i].phone}</td>
                            <td>${dataList[i].mailbox}</td>
                            <td>${dataList[i].sex}</td>
                            <td>${dataList[i].nation}</td>
                            <td><a href='#' edit='edit' data-id="${i}">编辑</a>&emsp;|&emsp;
                                <a href='#' data-id="${i}">删除</a></td>
                        </tr>`
            }

            $('tbody').html(strHtml)
        }
        $('tbody').click(function () {
            if (event.target.nodeName == "A") {
                // $(event.target).prepend().prepend().remove()
                // 编辑
                if ($(event.target).attr('edit') == 'edit') {
                    // console.log($(event.target).attr('data-id'));
                    status = 'edit'
                    thisId = $(event.target).attr('data-id')
                    data = dataList[thisId]
                    $('#name').val(data.name)
                    $('#age').val(data.age)
                    $('#phone').val(data.phone)
                    $('#mailbox').val(data.mailbox)
                    var num = data.sex == '男' ? 0 : data.sex == '女' ? 1 : 2
                    $('input[name=sex]').eq(num).prop('checked', true)
                    $('#nation').val(data.nation)
                } else {
                    // 删除
                    dataList.splice($(event.target).attr('data-id'), 1)
                    localStorage.setItem('dataList', JSON.stringify(dataList))
                    showList()
                }
            }
        })
        $('#ageObj').click(function () {
            var keywords = $('#keywords').val()
            if (keywords.length) {
                var arr = dataList.filter(function (item) {
                    if (item.name.indexOf(keywords) != -1) {
                        return true
                    }
                })
                showList(arr)
            } else {
                showList()
            }
        })
    })

</script>

</html>